<template>
  <div class="dashboard">
    <a-card v-if="systemInfo" title="系统信息">
      <div class="attr">
        <span class="attr-name">系统版本:&nbsp;</span>
        <span class="attr-value">{{ systemInfo.version }}</span>
      </div>
      <div class="attr">
        <span class="attr-name">Go版本:&nbsp;</span>
        <span class="attr-value">{{ systemInfo.goVersion }}</span>
      </div>
      <div class="attr">
        <span class="attr-name">操作系统:&nbsp;</span>
        <span class="attr-value">{{ systemInfo.os }}</span>
      </div>
      <div class="attr">
        <span class="attr-name">架构:&nbsp;</span>
        <span class="attr-value">{{ systemInfo.arch }}</span>
      </div>
    </a-card>
    <div class="echatrs">
      <select class="sel" @change="(e) => { changeDate((e.target as HTMLSelectElement).value) }">
        <option value="天">天</option>
        <option value="周">周</option>
        <option value="月">月</option>
      </select>
      <div class="out" style="display: flex;justify-content: space-around;align-items: center;">
        <div class="zcchartRef" style="width: 300px; height: 300px;"></div>
        <div class="nrchartRef" style="width: 300px; height: 300px;"></div>
        <div class="rmchartRef" style="width: 300px; height: 300px;"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { zcTian } from '@/api/echartsData';
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

interface lid {
  commentCount: number;
  createTime: number;
  hotScore: number;
  id: number;
  likeCount: number;
  title: string;
  viewCount: number
}
onMounted(async () => {
  const req1: Array<{ date: string, count: number }> = await zcTian('api/statistics/userregistrationtrendbyday');
  const req2: Array<{ date: string, count: number }> = await zcTian('api/statistics/contentpublishingtrendbyday');
  const req3: Array<{ list: Array<lid>, count: number, sumScore: number }> = await zcTian('api/statistics/hottopicsbyday');
  const chartInstance = echarts.init(document.querySelector('.zcchartRef') as HTMLElement)
  const xArr1 = ref([])
  const dataArr1 = ref([])
  for (let i = 0; i < req1.length; i += 1) {
    xArr1.value.push(req1[i].date.slice(-2) as never)
    dataArr1.value.push(req1[i].count as never)
  }
  const option1 = {
    title: {
      text: '用户注册趋势',
      left: 'center', // 标题居中
      top: 'bottom'
    },
    tooltip: {},
    xAxis: {
      data: xArr1.value
    },
    yAxis: {},
    series: [{
      name: '数值',
      type: 'bar',
      data: dataArr1.value
    }]
  }
  chartInstance.setOption(option1)
  const chartInstance2 = echarts.init(document.querySelector('.nrchartRef') as HTMLElement)
  const xArr2 = ref([])
  const dataArr2 = ref([])
  for (let i = 0; i < req2.length; i += 1) {
    xArr2.value.push(req2[i].date.slice(-2) as never)
    dataArr2.value.push(req2[i].count as never)
  }
  const option2 = {
    title: {
      text: '内容发布趋势',
      left: 'center', // 标题居中
      top: 'bottom'
    },
    tooltip: {},
    xAxis: {
      data: xArr2.value
    },
    yAxis: {},
    series: [{
      name: '数值',
      type: 'bar',
      data: dataArr2.value
    }]
  }
  chartInstance2.setOption(option2)
  const chartInstance3 = echarts.init(document.querySelector('.rmchartRef') as HTMLElement)

  const xArr3 = ref([])
  const data3: Array<lid> = req3[0].list
  const otherData = ref([])
  for (let i = 0; i < data3.length; i += 1) {
    xArr3.value.push({ value: data3[i].hotScore, name: data3[i].title, commentCount: data3[i].commentCount, createTime: (new Date(data3[i].createTime)).toLocaleDateString(), likeCount: data3[i].likeCount, viewCount: data3[i].viewCount, otherInfo: 123 })
  }
  console.log('xArr3', xArr3.value)
  const option3 = {
    title: {
      text: '热门话题',
      left: 'center', // 标题居中
      top: 'bottom'
    },
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        return `标题：${params.name}<br/>热度值: ${params.value}<br/>评论数: ${params.data.commentCount}<br/>创建时间: ${params.data.createTime}<br/>点赞数: ${params.data.likeCount}<br/>浏览数: ${params.data.viewCount}`;
      }
    },
    series: [
      {
        name: '热度值',
        type: 'pie',
        radius: '50%',
        data: xArr3.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };


  chartInstance3.setOption(option3)
})
async function changeDate(data: string) {
  if (data === '周') {
    const req1: Array<{ date: string, count: number }> = await zcTian('api/statistics/userregistrationtrendbyweek');
    const req2: Array<{ date: string, count: number }> = await zcTian('api/statistics/contentpublishingtrendbyweek');
    const req3: Array<{ date: string, count: number }> = await zcTian('api/statistics/hottopicsbyweek');
    const chartInstance = echarts.init(document.querySelector('.zcchartRef') as HTMLElement)
    const xArr1 = ref([])
    const dataArr1 = ref([])
    for (let i = 0; i < req1.length; i += 1) {
      xArr1.value.push(req1[i].date.slice(-2) as never)
      dataArr1.value.push(req1[i].count as never)
    }
    const option1 = {
      title: {
        text: '用户注册趋势',
        left: 'center', // 标题居中
        top: 'bottom'
      },
      tooltip: {},
      xAxis: {
        data: xArr1.value
      },
      yAxis: {},
      series: [{
        name: '数值',
        type: 'bar',
        data: dataArr1.value
      }]
    }
    chartInstance.setOption(option1)
    const chartInstance2 = echarts.init(document.querySelector('.nrchartRef') as HTMLElement)
    const xArr2 = ref([])
    const dataArr2 = ref([])
    for (let i = 0; i < req2.length; i += 1) {
      xArr2.value.push(req2[i].date.slice(-2) as never)
      dataArr2.value.push(req2[i].count as never)
    }
    const option2 = {
      title: {
        text: '内容发布趋势',
        left: 'center', // 标题居中
        top: 'bottom'
      },
      tooltip: {},
      xAxis: {
        data: xArr2.value
      },
      yAxis: {},
      series: [{
        name: '数值',
        type: 'bar',
        data: dataArr2.value
      }]
    }
    chartInstance2.setOption(option2)
    const chartInstance3 = echarts.init(document.querySelector('.rmchartRef') as HTMLElement)

    const xArr3 = ref([])
    const data3: Array<lid> = req3[0].list
    const otherData = ref([])
    for (let i = 0; i < data3.length; i += 1) {
      xArr3.value.push({ value: data3[i].hotScore, name: data3[i].title, commentCount: data3[i].commentCount, createTime: (new Date(data3[i].createTime)).toLocaleDateString(), likeCount: data3[i].likeCount, viewCount: data3[i].viewCount, otherInfo: 123 })
    }
    console.log('xArr3', xArr3.value)
    const option3 = {
      title: {
        text: '热门话题',
        left: 'center', // 标题居中
        top: 'bottom'
      },
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          return `标题：${params.name}<br/>热度值: ${params.value}<br/>评论数: ${params.data.commentCount}<br/>创建时间: ${params.data.createTime}<br/>点赞数: ${params.data.likeCount}<br/>浏览数: ${params.data.viewCount}`;
        }
      },
      series: [
        {
          name: '热度值',
          type: 'pie',
          radius: '50%',
          data: xArr3.value,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };


    chartInstance3.setOption(option3)
  } else if (data === '天') {
    const req1: Array<{ date: string, count: number }> = await zcTian('api/statistics/userregistrationtrendbyday');
    const req2: Array<{ date: string, count: number }> = await zcTian('api/statistics/contentpublishingtrendbyday');
    const req3: Array<{ date: string, count: number }> = await zcTian('api/statistics/hottopicsbyday');
    const chartInstance = echarts.init(document.querySelector('.zcchartRef') as HTMLElement)
    const xArr1 = ref([])
    const dataArr1 = ref([])
    for (let i = 0; i < req1.length; i += 1) {
      xArr1.value.push(req1[i].date.slice(-2) as never)
      dataArr1.value.push(req1[i].count as never)
    }
    const option1 = {
      title: {
        text: '用户注册趋势',
        left: 'center', // 标题居中
        top: 'bottom'
      },
      tooltip: {},
      xAxis: {
        data: xArr1.value
      },
      yAxis: {},
      series: [{
        name: '数值',
        type: 'bar',
        data: dataArr1.value
      }]
    }
    chartInstance.setOption(option1)
    const chartInstance2 = echarts.init(document.querySelector('.nrchartRef') as HTMLElement)
    const xArr2 = ref([])
    const dataArr2 = ref([])
    for (let i = 0; i < req2.length; i += 1) {
      xArr2.value.push(req2[i].date.slice(-2) as never)
      dataArr2.value.push(req2[i].count as never)
    }
    const option2 = {
      title: {
        text: '内容发布趋势',
        left: 'center', // 标题居中
        top: 'bottom'
      },
      tooltip: {},
      xAxis: {
        data: xArr2.value
      },
      yAxis: {},
      series: [{
        name: '数值',
        type: 'bar',
        data: dataArr2.value
      }]
    }
    chartInstance2.setOption(option2)
    const chartInstance3 = echarts.init(document.querySelector('.rmchartRef') as HTMLElement)

    const xArr3 = ref([])
    const data3: Array<lid> = req3[0].list
    const otherData = ref([])
    for (let i = 0; i < data3.length; i += 1) {
      xArr3.value.push({ value: data3[i].hotScore, name: data3[i].title, commentCount: data3[i].commentCount, createTime: (new Date(data3[i].createTime)).toLocaleDateString(), likeCount: data3[i].likeCount, viewCount: data3[i].viewCount, otherInfo: 123 })
    }
    console.log('xArr3', xArr3.value)
    const option3 = {
      title: {
        text: '热门话题',
        left: 'center', // 标题居中
        top: 'bottom'
      },
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          return `标题：${params.name}<br/>热度值: ${params.value}<br/>评论数: ${params.data.commentCount}<br/>创建时间: ${params.data.createTime}<br/>点赞数: ${params.data.likeCount}<br/>浏览数: ${params.data.viewCount}`;
        }
      },
      series: [
        {
          name: '热度值',
          type: 'pie',
          radius: '50%',
          data: xArr3.value,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };


    chartInstance3.setOption(option3)
  } else {
    const req1: Array<{ date: string, count: number }> = await zcTian('api/statistics/userregistrationtrendbymonth');
    const req2: Array<{ date: string, count: number }> = await zcTian('api/statistics/contentpublishingtrendbymonth');
    const req3: Array<{ date: string, count: number }> = await zcTian('api/statistics/hottopicsbymonth');
    const chartInstance = echarts.init(document.querySelector('.zcchartRef') as HTMLElement)
    const xArr1 = ref([])
    const dataArr1 = ref([])
    for (let i = 0; i < req1.length; i += 1) {
      xArr1.value.push(req1[i].date.slice(-2) as never)
      dataArr1.value.push(req1[i].count as never)
    }
    const option1 = {
      title: {
        text: '用户注册趋势',
        left: 'center', // 标题居中
        top: 'bottom'
      },
      tooltip: {},
      xAxis: {
        data: xArr1.value
      },
      yAxis: {},
      series: [{
        name: '数值',
        type: 'bar',
        data: dataArr1.value
      }]
    }
    chartInstance.setOption(option1)
    const chartInstance2 = echarts.init(document.querySelector('.nrchartRef') as HTMLElement)
    const xArr2 = ref([])
    const dataArr2 = ref([])
    for (let i = 0; i < req2.length; i += 1) {
      xArr2.value.push(req2[i].date.slice(-2) as never)
      dataArr2.value.push(req2[i].count as never)
    }
    const option2 = {
      title: {
        text: '内容发布趋势',
        left: 'center', // 标题居中
        top: 'bottom'
      },
      tooltip: {},
      xAxis: {
        data: xArr2.value
      },
      yAxis: {},
      series: [{
        name: '数值',
        type: 'bar',
        data: dataArr2.value
      }]
    }
    chartInstance2.setOption(option2)
    const chartInstance3 = echarts.init(document.querySelector('.rmchartRef') as HTMLElement)

    const xArr3 = ref([])
    const data3: Array<lid> = req3[0].list
    const otherData = ref([])
    for (let i = 0; i < data3.length; i += 1) {
      xArr3.value.push({ value: data3[i].hotScore, name: data3[i].title, commentCount: data3[i].commentCount, createTime: (new Date(data3[i].createTime)).toLocaleDateString(), likeCount: data3[i].likeCount, viewCount: data3[i].viewCount, otherInfo: 123 })
    }
    console.log('xArr3', xArr3.value)
    const option3 = {
      title: {
        text: '热门话题',
        left: 'center', // 标题居中
        top: 'bottom'
      },
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          return `标题：${params.name}<br/>热度值: ${params.value}<br/>评论数: ${params.data.commentCount}<br/>创建时间: ${params.data.createTime}<br/>点赞数: ${params.data.likeCount}<br/>浏览数: ${params.data.viewCount}`;
        }
      },
      series: [
        {
          name: '热度值',
          type: 'pie',
          radius: '50%',
          data: xArr3.value,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };


    chartInstance3.setOption(option3)
  }

}
const systemInfo = ref();
const load = async () => {
  systemInfo.value = await axios.get('/api/admin/common/system_info');
};
load();
</script>

<style lang="less" scoped>
.dashboard {
  margin: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 20px;

  font-size: 14px;
  line-height: 1.8;

  .attr {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 14px;

    .attr-name {
      color: var(--color-text-1);
    }

    span.attr-value {
      color: var(--color-text-2);
    }

    a.attr-value {
      color: rgb(var(--arcoblue-6));
    }
  }
}
</style>
